<template>
	<view>
		<!-- flex -->
		<view class=" align-center">
			<uni-list :border="true">
				<uni-section title="请如实上传您的资料" titleBolder type="line" typeColor="success"></uni-section>
				<uni-list-item>
					<template slot="header">
						<view class="review-header-section">
							<text class="review-column-tag">*</text>
							<text>真实姓名</text>
						</view>
					</template>
					<template slot="body">
						<input @input="onkeyupInput" class="uni-input" name="docname" v-model="form.uname" maxlength="5"
							placeholder="请填写您的真实姓名" />
					</template>
				</uni-list-item>

				<view class="flexflex" style="padding: 12px 15px;justify-content: flex-start;">
					<view class="review-header-section">
						<text class="review-column-tag">*</text>
						<text>就职医院</text>
					</view>
					<view class="">
						<input @input="onkeyupInputComp" class="uni-input" name="docpartment" v-model="form.ucompname"
							maxlength="8" placeholder="就职医院" />
					</view>
				</view>

				<view class="flexflex" style="padding: 12px 15px;justify-content: flex-start;">
					<view class="review-header-section">
						<text class="review-column-tag">*</text>
						<text>所属科室</text>
					</view>
					<view class="">
						<uni-data-select v-model="form.udepartmentid" :localdata="range1"
							@change="change1"></uni-data-select>
					</view>
				</view>

				<uni-list-item>
					<template slot="header">
						<view class="review-header-section">
							<text class="review-column-tag">*</text>
							<text>职称</text>
						</view>
					</template>
					<template slot="body">
						<input @input="onkeyupInput3" class="uni-input" name="doclevel" v-model="form.utechp"
							maxlength="8" placeholder="请填写您目前的职称" />
					</template>
				</uni-list-item>
				<view class="uni-review-section"></view>

				<uni-list-item>
					<template slot="header">
						<view class="review-header-section">
							<text class="review-column-tag">*</text>
							<text>个人简介</text>
						</view>
					</template>
					<template slot="body">
						<input class="uni-input" name="docresume" v-model="form.introduction" maxlength="25"
							placeholder="请填写个人简介(8字以上)" />
					</template>
				</uni-list-item>

				<uni-list-item>
					<template slot="header">
						<view class="review-header-section">
							<text class="review-column-tag">*</text>
							<text>职业经历</text>
						</view>
					</template>
					<template slot="body">
						<input class="uni-input" name="docexperience" v-model="form.career" maxlength="25"
							placeholder="请填写您的职业经历(8字以上)" />
					</template>
				</uni-list-item>
				<uni-list-item>
					<template slot="header">
						<view class="review-header-section">
							<text class="review-column-tag">*</text>
							<text>身份证</text>
						</view>
					</template>
					<template slot="body">
						<input class="uni-input" name="docexperience" v-model="form.ucardid" maxlength="25"
							placeholder="证件号码" />
					</template>
				</uni-list-item>

			</uni-list>
		</view>

		<view class="flex-column" v-show="false">
			<view class="review-column">
				<view class="review-column-section">
					<text class="review-column-tag">*</text>
					<text>医生头像</text>
				</view>
				<view class="review_column_picview">
					<image class="review_avatar_image" :src="form.uheadPic" @click="reviewImage(0)" mode="aspectFill" />
				</view>
			</view>
			<view class="review-column">
				<view class="review-column-section">
					<text class="review-column-tag">*</text>
					<text>身份证件(正反面均需上传)</text>
				</view>
				<view class="review_column_picview">
					<image class="review_column_image" :src="form.uidcardzPic" @click="reviewImage(1)"
						mode="aspectFill" />
					<image class="review_column_image" :src="form.uidcardfPic" @click="reviewImage(2)"
						mode="aspectFill" />
				</view>
			</view>
			<view class="review-column">
				<view class="review-column-section">
					<text class="review-column-tag">*</text>
					<text>胸牌/执业证/资格证/职称证，至少上传一项</text>
				</view>
				<view class="review_column_picview">
					<image class="review_column_image" :src="form.upracticingPic" @click="reviewImage(3)"
						mode="aspectFill" />
				</view>
				<view class="review-column-footer">
					<text>照片仅用作认证，平台会保护您的隐私，不会泄漏给第三方</text>
				</view>
			</view>
		</view>

		<!--  -->
		<view class="uni-flex mt-20">
			<button type="primary" class="piccon_button" @click="picodoneAction12"><text
					class="font-md">修改资料</text></button>
		</view>
	</view>
</template>

<script>
	// import request from '@/common/request.js';
	export default {
		data() {
			return {
				form: {
					applyStatus: "-1",
					career: null,
					introduction: null,
					ucompname: null,
					udepartmentid: null,
					uname: null,
					utechp: null,
					ucardid: '',
					uheadPic: require('@/static/icons/icon_docavatar.png'),
					uidcardfPic: require('@/static/icons/icon_accustomfront.png'),
					uidcardzPic: require('@/static/icons/icon_accustomback.png'),
					upracticingPic: require('@/static/icons/icon_accustomground.png'),
				},
				rid: "",
				docname: "",
				dochospital: "",
				docpartment: "",
				doclevel: "",
				docexpert: "",
				docresume: "",
				docexperience: "",


				array: ['选项一', '选项二', '选项三', '选项四'],
				index: 0,

				options: ['选项1', '选项2', '选项3'],
				selected: '',
				value: 0,
				range1: [],

				userData: {},
				rid: '',
				reviewState: '1',
				reviewButton: "修改认证",
				uploadToken: '',
				reviewPath: require('@/static/icons/icon_docavatar.png'),
				reviewPath1: require('@/static/icons/icon_accustomfront.png'),
				reviewPath2: require('@/static/icons/icon_accustomback.png'),
				reviewPath3: require('@/static/icons/icon_accustomground.png')
			}
		},
		onLoad(options) {
			this.rid = options.rid;
			// this.getHosList()''
			return;
			this.getDepartment()
		},
		async onShow() {
			let re = await this.$API.doctorApi.doctorAuth()
			let {
				applyStatus,
				career,
				introduction,
				ucompname,
				udepartmentid,
				uheadPic,
				uidcardfPic,
				uidcardzPic,
				ucardid,
				uname,
				upracticingPic,
				utechp
			} = re

			this.form.applyStatus = applyStatus
			this.form.career = career
			this.form.introduction = introduction
			this.form.ucompname = ucompname
			this.form.udepartmentid = udepartmentid
			this.form.uname = uname
			this.form.utechp = utechp
			this.form.ucardid = ucardid
			if (uheadPic) {
				this.form.uheadPic = uheadPic
			}
			if (uidcardfPic) {
				this.form.uidcardfPic = uidcardfPic
			}
			if (uidcardzPic) {
				this.form.uidcardzPic = uidcardzPic
			}
			if (upracticingPic) {
				this.form.upracticingPic = upracticingPic
			}
			uni.setStorageSync('applyStatus', applyStatus)
			// if (applyStatus === '1') {
			// 	let res = await this.$API.userApi.getUser()
			// 	let info = res.userInfo
			// 	uni.setStorageSync('userInfo', info)
			// 	uni.switchTab({
			// 		url: "/pages/index/index"
			// 	})
			// };
		},
		async onPullDownRefresh() {
			console.log("pullrefresh");
			try {
				let re = await this.$API.doctorApi.doctorAuth()
				this.form = re
			} catch (e) {
				uni.showToast({
					title: 'error',
					icon: 'none'
				});
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		},

		methods: {
			/* 科室 */
			async getDepartment(id) {
				let re = await this.$API.doctorApi.getDepartment(id)
				this.range1 = re.map((i) => {
					return {
						value: i.udepartmentid,
						text: i.uoptype
					}
				})
				
				console.log(this.range1,"123123");
			},
			reviewImage: function(position) {
				let that = this;
				console.log('reviewImage');
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					sizeType: ['compressed', 'original'],
					success: (imageres) => {
						console.log(imageres, "imageres");
						this.uploaderImagePath(position, imageres.tempFilePaths[0]);
					},
					fail: (err) => {
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'] && res
									.authSetting[
										'scope.camera'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},

			uploaderImagePath(position, uploadFileRes) {
				console.log(position, uploadFileRes);
				let that = this;
				uni.uploadFile({
					url: this.$url + '/upload/image', //仅为示例，非真实的接口地址
					header: {
						Authorization: uni.getStorageSync('token')
					},
					filePath: uploadFileRes,
					name: 'file',
					success: (uploadFileRes) => {
						console.log('sucess');
						// let imgUrl = that.$url + uploadFileRes.data;
						let imgUrl = uploadFileRes.data;
						switch (position) {
							case 0:
								this.form.uheadPic = imgUrl;
								break;
							case 1:
								this.form.uidcardzPic = imgUrl;
								break;
							case 2:
								this.form.uidcardfPic = imgUrl;
								break;
							case 3:
								this.form.upracticingPic = imgUrl;
								break;
						}
					}
				});
			},

			/* 科室 */
			// async getDepartment(id) {
			// 	let re = await this.$API.doctorApi.getDepartment(id)
			// 	console.log(re, "re");
			// 	this.range1 = re.map((i) => {
			// 		return {
			// 			value: i.id,
			// 			text: i.label
			// 		}
			// 	})
			// },
			/* 医院 */
			// async getHosList() {
			// 	let re = await this.$API.hosApi.getHosList()
			// 	this.range = re.map((i) => {
			// 		return {
			// 			value: i.value,
			// 			text: i.label
			// 		}
			// 	})
			// },
			change(e) {
				console.log("e:", e);
				this.dochospital = e
				this.getDepartment(this.dochospital)
			},
			change1(e) {
				let that = this
				that.form.udepartmentid = e
			},


			onkeyupInput: function(event) {
				var value = event.detail.value;
				if (!value || value == " ") {
					return '';
				}
				const rule = /[^\u4E00-\u9FA5]{2,5}$/; //2-5个中文字正则表达式
				this.$nextTick(function() {
					this.docname = value.replace(rule, '');
				})
			},
			onkeyupInput1: function(event) {
				var value = event.detail.value;
				if (!value || value == " ") {
					return '';
				}
				const rule = /[^\u4E00-\u9FA5]{4,12}$/;
				this.$nextTick(function() {
					this.dochospital = value.replace(rule, '');
				})
			},
			onkeyupInputComp: function() {
				var value = event.detail.value;
				if (!value || value == " ") {
					return '';
				}
				const rule = /[^\u4E00-\u9FA5]{2,9}$/;
				this.$nextTick(function() {
					this.docpartment = value.replace(rule, '');
				})
				console.log("请输入就职的医院名称");
			},
			onkeyupInput2: function(event) {
				var value = event.detail.value;
				if (!value || value == " ") {
					return '';
				}
				const rule = /[^\u4E00-\u9FA5]{2,9}$/;
				this.$nextTick(function() {
					this.docpartment = value.replace(rule, '');
				})
			},
			onkeyupInput3: function(event) {
				var value = event.detail.value;
				if (!value || value == " ") {
					return '';
				}
				const rule = /[^\u4E00-\u9FA5]{2,8}$/;
				this.$nextTick(function() {
					this.doclevel = value.replace(rule, '');
				})
			},
			picodoneAction12: async function() {
				uni.showToast({
					title:'待开发'
				})
				return
				let re = await this.$API.doctorApi.doctorAuthApply(this.form)
				const user = uni.getStorageInfoSync('userInfo')
				uni.showToast({
					title: '申请中，请等待'
				})
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* @import url("review.css"); */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F7F8FA;
		min-height: 100%;
		height: auto;
	}

	.uni-review-section {
		height: 24px;
		background-color: #F7F8FA;
	}

	.review-header-section {
		display: flex;
		width: 180rpx;
		flex-direction: row;
		line-height: 48rpx;
		margin: 8rpx;
		font-size: 30rpx;
	}

	.review-main {
		display: flex;
		flex-direction: column;
	}

	.review-header {
		display: flex;
		background-color: #FFFFFF;
		padding: 64rpx 32rpx;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.review-column {
		display: flex;
		margin-top: 16rpx;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.review-column-section {
		display: flex;
		flex-direction: row;
		color: #535568;
		line-height: 48rpx;
		align-items: center;
		margin: 24rpx 36rpx 8rpx;
		font-size: 30rpx;
	}

	.review-column-footer {
		color: #9FA4AE;
		margin-left: 48rpx;
		margin-bottom: 24rpx;
		line-height: 24rpx;
		font-size: 20rpx;
	}

	.review_column_picview {
		margin: 4rpx 36rpx 36rpx;
		display: flex;
		flex-direction: row;
	}

	.review_avatar_image {
		margin: 12rpx;
		width: 265rpx;
		height: 265rpx;
	}

	.review_column_image {
		margin: 12rpx;
		width: 265rpx;
		height: 160rpx;
	}

	.review-header-image {
		margin-top: 8rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.review-header-title {
		color: #535568;
		margin-top: 8rpx;
		font-size: 36rpx;
	}

	.review-column-tag {
		color: #E02020;
		margin: 8rpx;
		font-size: 40rpx;
		line-height: 48rpx;
	}

	.review-column-title {
		color: #535568;
		margin: 24rpx 48rpx 8rpx;
		font-size: 30rpx;
	}

	.review-header-message {
		color: #9FA4AE;
		text-align: center;
		margin: 8rpx 24rpx;
		font-size: 24rpx;
	}

	.review_btn button {
		flex: 1;
		height: 84rpx;
		border-radius: 8rpx;
		line-height: 96rpx;
		margin: 64rpx 38rpx 38rpx;
		color: rgb(255, 255, 255);
		background-color: #0873DE;
		font-size: 34rpx;
		letter-spacing: 8rpx;
		background-image: linear-gradient(90deg, #07C193, #3EAAB4);
	}

	.btn_hover {
		background-color: #94999c;
	}

	.piccon_button {
		width: 92%;
		padding: 0 72rpx;
		margin: 64rpx 32rpx;
		font-size: 48rpx;
		line-height: 1.8;
		border-radius: 8rpx;
		border-width: 0rpx;
		background-image: linear-gradient(90deg, #07C193, #3EAAB4);
	}

	/*  */



	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F7F8FA;
		min-height: 100%;
		height: auto;
	}

	.uni-review-section {
		height: 24px;
		background-color: #F7F8FA;
	}

	.review-header-section {
		display: flex;
		width: 180rpx;
		flex-direction: row;
		line-height: 48rpx;
		margin: 8rpx;
		font-size: 30rpx;
	}

	.review-main {
		display: flex;
		flex-direction: column;
	}

	.review-header {
		display: flex;
		background-color: #FFFFFF;
		padding: 64rpx 32rpx;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.review-column {
		display: flex;
		margin-top: 16rpx;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.review-column-section {
		display: flex;
		flex-direction: row;
		color: #535568;
		line-height: 48rpx;
		align-items: center;
		margin: 24rpx 36rpx 8rpx;
		font-size: 30rpx;
	}

	.review-column-footer {
		color: #9FA4AE;
		margin-left: 48rpx;
		margin-bottom: 24rpx;
		line-height: 24rpx;
		font-size: 20rpx;
	}

	.review_column_picview {
		margin: 4rpx 36rpx 36rpx;
		display: flex;
		flex-direction: row;
	}

	.review_avatar_image {
		margin: 12rpx;
		width: 265rpx;
		height: 265rpx;
	}

	.review_column_image {
		margin: 12rpx;
		width: 265rpx;
		height: 160rpx;
	}

	.review-header-image {
		margin-top: 8rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.review-header-title {
		color: #535568;
		margin-top: 8rpx;
		font-size: 36rpx;
	}

	.review-column-tag {
		color: #E02020;
		margin: 8rpx;
		font-size: 40rpx;
		line-height: 48rpx;
	}

	.review-column-title {
		color: #535568;
		margin: 24rpx 48rpx 8rpx;
		font-size: 30rpx;
	}

	.review-header-message {
		color: #9FA4AE;
		text-align: center;
		margin: 8rpx 24rpx;
		font-size: 24rpx;
	}

	.review_btn button {
		flex: 1;
		height: 84rpx;
		border-radius: 8rpx;
		line-height: 96rpx;
		margin: 64rpx 38rpx 38rpx;
		color: rgb(255, 255, 255);
		background-color: #0873DE;
		font-size: 34rpx;
		letter-spacing: 8rpx;
		background-image: linear-gradient(90deg, #07C193, #3EAAB4);
	}

	.btn_hover {
		background-color: #94999c;
	}

	.piccon_button {
		width: 92%;
		padding: 0 72rpx;
		margin: 64rpx 32rpx;
		font-size: 48rpx;
		line-height: 1.8;
		border-radius: 8rpx;
		border-width: 0rpx;
		background-image: linear-gradient(90deg, #07C193, #3EAAB4);
	}
</style>